<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="section template-img">
          <img :src="template.post"/>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="section">
          <el-row :gutter="10">
            <el-col :span="10" class="title">
              <el-text class="mx-1">模版名称</el-text>
            </el-col>
            <el-col :span="14" class="content">
              <el-text class="mx-1">{{template.title}}</el-text>
            </el-col>
          </el-row>
        </div>
        <div class="column margin-small padding-small border-radius-small">
          <TemplateConfig 
            v-for="(item,index) in template.configs" 
            :key="index"
            :options="item.options" 
            :title="item.title"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TemplateConfig from './TemplateConfig'

export default {
  components: { TemplateConfig },
  name: 'AppTemplate',
  props: {
    template: {
      title: String,
      post: String,
      configs: [
        {
          title: String,
          options:[]
        }
      ]
    }
  },
  data: ()=>{
    return {
    }
  }
}
</script>
<style scoped>
.container {
  height: 400px;
  box-sizing: border-box;
  margin: 10px 10%;
  border: 1px solid black;
  border-radius: 20px;
  overflow: hidden;

  .section {
    overflow: hidden;
  }
  .template-img {
    img {
      width: 50%;
    }
  }
  .title { 
    text-align: right;
  }
  .content {
    text-align: left;
  }
  .bordered {
    border: 1px dotted gray;
  }
}
</style>
